function setHighlight(el, binding) {
  const { value } = binding;
  let _keywords = value;
  let _color = "red";
  if (typeof value === "object") {
    const { keywords = "", color = _color } = value;
    _keywords = keywords;
    _color = color;
  }
  if (_keywords) {
    _keywords = _keywords.split("|");
    const regex = new RegExp(`(${_keywords.join("|")})`, "gi");
    const highlightedText = el.innerText.replace(
      regex,
      `<span style="color: ${_color};">$1</span>`
    );
    el.innerHTML = highlightedText;
  } else {
    el.innerHTML = el.innerText;
  }
}

const highlightText = {
  beforeMount: function (el, binding) {
    setHighlight(el, binding);
  },
  updated: function (el, binding) {
    setHighlight(el, binding);
  },
}

export default highlightText;